<template>
    <div class="join-addEdit">
        <el-dialog :append-to-body="true" :title="title" v-model="show" @close="cancelFun" destroy-on-close>
            <el-form :model="form" ref="formRef" :rules="rules" label-width="100px" class="demo-ruleForm">
                <el-form-item label="状态:" prop="status">
                    <el-select v-model="form.status" class="m-2" placeholder="Select">
                        <el-option v-for="item in statusArr" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelFun" size="large">取消</el-button>
                    <el-button type="primary" @click="confirmFun" size="large">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, ref, watch, defineEmits, reactive } from 'vue'
import {
    updateShangpinStatus,
} from '@api/book'
import { ElMessage } from 'element-plus'

const props = defineProps({
    show: {
        type: Boolean,
        default: null
    },
    id: {
        type: String,
        default: {
            id: ''
        }
    }
})

const statusArr = ref([
    {
        label: '普通',
        value: '0'
    },
    // {
    //     label: '黑名单',
    //     value: '-1'
    // },
    {
        label: '新品',
        value: '1'
    },
    {
        label: '精品',
        value: '2'
    },
])
const formRef = ref()

const form = ref({
    status: '0'
})

const rules = reactive({
})

const emit = defineEmits(['hide-change-status'])

const title = computed(() => {
    return '修改书籍状态'
})

function confirmFun() {
    formRef.value.validate(async (valid) => {
        if (valid) {
            let res = '';
            let { status } = form.value

            res = await updateShangpinStatus({ id: props.id, status })

            if (res.code == 200) {
                ElMessage({
                    message: '操作成功!',
                    type: 'success',
                })
                emit('hide-change-status', 'complete')
            }

        }
    })
}

function cancelFun() {
    emit('hide-change-status', 'cancel')
}

watch(
    () => props.addEditData,
    (newValue, oldValue) => {
        form.value.id = newValue.id
    },
    { deep: true }
)
</script>
<style lang="scss" scoped>
.news-addEdit {}
</style>
  